<template>
    <div class="solid flex-1 flex flex-col overflow-y-auto min-h-[300px] dms" id="dms"><!--中间内容区-->
        <Song v-for="(songData,index) in newSongDatas" :key="index" :songData="songData"></Song>   
    </div><!--中间内容区结束-->
</template>
<script>
import Song from '@/components/Song.vue';
import axios from 'axios';
export default{
    name:'Recommend',
    data(){
        return{
            songData:{
                songId:0,
                songCoverSrc:'/',
                songTitle:'无',
                songAudioSrc:'/',
                IsSave:false
            },
            songDatas:[],
            newSongDatas:[]
        }

    },
    components:{Song},
    mounted(){
        axios.get('http://192.168.101.3:3001/getMusic').then((response)=>{
            console.log('后端返回的数据：', response.data);
            this.newSongDatas=[];
            const songCoverSrcs=response.data.imageList
            const songTitles=response.data.titles;
            const songAudioSrcs=response.data.audioList
            let indexArr=new Array(response.data.audioList.length).fill(false) 
            for(let i=0;i<5;i++){
                do {
                    var autoNum=Math.floor(Math.random()*response.data.audioList.length);
                } while (indexArr[autoNum]);
                indexArr[autoNum]=true
                this.newSongDatas.push({
                    songId:i+1,
                    songCoverSrc:songCoverSrcs[autoNum],
                    songTitle:songTitles[autoNum],
                    songAudioSrc:songAudioSrcs[autoNum]
                })

            };
        })
        ;
    },
    methods:{
        
       
    }
}
</script>
<style>

#dms::-webkit-scrollbar{ 
	  width:10px;
	  height:100%;
	}
	#dms::-webkit-scrollbar-thumb{ 
	  width:6px;
	  height:60px;
	  background-color:#3a3535;
	  border-radius:3px;
	}
	
</style>